<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="viewport"
          content="width=device-width, maximum-scale=1.0, initial-scale=1.0,initial-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>智能客服</title>

    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?t=1489039620156"/>
    <link rel="stylesheet" type="text/css" href="/im/css/ukefu.css">
    <link rel="stylesheet" id="skin" type="text/css" href="/im/css/default/ukefu.css">

    <!-- kindeditor -->
    <link rel="stylesheet" type="text/css" href="/im/js/kindeditor/themes/default/default.css">

    <script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
    <script src="/js/jquery.form.js"></script>

    <script type="text/javascript" src="/im/js/kindeditor/kindeditor.js"></script>
    <script type="text/javascript" src="/im/js/kindeditor/lang/zh-CN.js"></script>
    <script src="/js/recordmp3.js"></script>
    <#if inviteData?? && inviteData.enablevoice?? && inviteData.enablevoice == true>
        <script src="/js/ukefu-voice.js"></script>
    </#if>
    <script src="/js/weixinAudio.js"></script>
    <script src="/js/template.js"></script>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }

        *:not(input,textarea) {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
        }

        .ukefu-suggest {
            position: fixed;
            width: 100%;
            bottom: 0px;
            margin-bottom: 55px;
            border: 1px solid #dedede;
            border-left: 0px;
            border-right: 0px;
            background-color: #ffffff;
            padding: 0px 5px 0 0px;
            line-height: 25px;
            font-size: 16px;
            display: none;
            z-index: 1000;
            -webkit-transform: translateZ(0);
        }

        .ukefu-suggest a {
            color: #333333;
            text-decoration: none;
        }

        .ukefu-suggest-change {
            position: absolute;
            right: 0px;
            padding: 0px 5px;
            color: #4665d4;
        }

        .bq-back-btn{
            display: flex;
            align-items: center;
            margin-left: 8px;
        }
    </style>
    <script src="/im/js/socket.io.js"></script>
    <script type="text/javascript">
        var editor, words, textheight, wordinx = 0, schema = '${schema!"http"}', invite = false,
            upload = "/im/voice/upload.html?userid=${userid!''}&appid=${appid!''}";

        /**
         * 文本框根据输入内容自适应高度
         * @param                {HTMLElement}        输入框元素
         * @param                {Number}                设置光标与输入框保持的距离(默认0)
         * @param                {Number}                设置最大高度(可选)
         */
        var autoTextarea = function (elem, extra, maxHeight) {
            extra = extra || 0;
            var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
                isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                addEvent = function (type, callback) {
                    elem.addEventListener ?
                        elem.addEventListener(type, callback, false) :
                        elem.attachEvent('on' + type, callback);
                },
                getStyle = elem.currentStyle ? function (name) {
                    var val = elem.currentStyle[name];

                    if (name === 'height' && val.search(/px/i) !== 1) {
                        var rect = elem.getBoundingClientRect();
                        return rect.bottom - rect.top -
                            parseFloat(getStyle('paddingTop')) -
                            parseFloat(getStyle('paddingBottom')) + 'px';
                    }
                    ;

                    return val;
                } : function (name) {
                    return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'));


            elem.style.resize = 'none';

            var change = function () {
                var scrollTop, height,
                    padding = 0,
                    style = elem.style;

                if (elem._length === elem.value.length) return;
                elem._length = elem.value.length;

                if (!isFirefox && !isOpera) {
                    padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
                }
                ;
                scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

                elem.style.height = minHeight + 'px';
                if (elem.scrollHeight > minHeight) {
                    if (maxHeight && elem.scrollHeight > maxHeight) {
                        height = maxHeight - padding;
                        style.overflowY = 'auto';
                    } else {
                        height = elem.scrollHeight - padding;
                        style.overflowY = 'hidden';
                    }
                    ;
                    style.height = height + extra + 'px';
                    scrollTop += parseInt(style.height) - elem.currHeight;
                    document.body.scrollTop = scrollTop;
                    document.documentElement.scrollTop = scrollTop;
                    elem.currHeight = parseInt(style.height);
                }
                ;
                changeTextArea();
                wordinx = getPositionForTextArea(document.getElementById('message'));
            };

            addEvent('propertychange', change);
            addEvent('input', change);
            addEvent('focus', change);
            change();
        };

        //多行文本框
        function getPositionForTextArea(ctrl) {
            var CaretPos = 0;
            if (document.selection) { // IE Support
                ctrl.focus();
                var Sel = document.selection.createRange();
                var Sel2 = Sel.duplicate();
                Sel2.moveToElementText(ctrl);
                var CaretPos = -1;
                while (Sel2.inRange(Sel)) {
                    Sel2.moveStart('character');
                    CaretPos++;
                }
            } else if (ctrl.selectionStart || ctrl.selectionStart == '0') { // Firefox support
                CaretPos = ctrl.selectionStart;
            }
            return (CaretPos);
        }

        function openFaceDialog() {
            $("#ukefu-suggest").empty().hide();
            if (document.getElementById("faceindex").style.display == "none") {
                document.getElementById("faceindex").style.display = "block";
                document.getElementById("bottom").style.height = $('#message').height() + 20 + document.getElementById("faceindex").offsetHeight + "px";
                document.getElementById("above").style.height = "calc(100% - " + ($('#bottom').height()) + "px)"
            } else {
                closeFaceDialog();
            }
            return false;
        }

        function closeFaceDialog() {
            document.getElementById("faceindex").style.display = "none";
            document.getElementById("bottom").style.height = $('#message').height() + "px";
            document.getElementById("above").style.height = "calc(100% - " + ($('#message').height() + 20) + "px)";
        }

        function changeTextArea() {
            if (document.getElementById("faceindex").style.display == "none") {
                $('#bottom').height(document.getElementById('message').scrollHeight);
                document.getElementById("above").style.height = "calc(100% - " + (document.getElementById('message').scrollHeight + 20) + "px)"
            } else {
                $('#bottom').height(document.getElementById('message').scrollHeight + document.getElementById("faceindex").offsetHeight);
                document.getElementById("above").style.height = "calc(100% - " + (document.getElementById('bottom').scrollHeight) + "px)"
            }
        }

        function insertImg(obj) {
            if (wordinx >= 0) {
                var text = $('#message').val();
                var value = text.substring(0, wordinx) + "[" + obj + "]" + text.substring(wordinx, text.length);
                $('#message').val(value);
                wordinx = wordinx + 2 + obj.length;
            }
        }

        $(document).ready(function () {
            $(document).on("click", '[data-toggle="suggest"]', function (e) {
                $('#message').val($(this).data("content"));
                sendMessage();
            });
            $(document).on("click", '[data-toggle="change"]', function (e) {
                var blocks = $('.ukefu-suggest-block');
                for (var i = 0; i < blocks.length; i++) {
                    if ($(blocks[i]).is(":hidden") == false) {
                        $(blocks[i]).hide();
                        if (i + 1 < blocks.length) {
                            $(blocks[i]).next().show();
                        } else {
                            $(blocks[0]).show();
                        }
                        break;
                    }
                }
            });
            window.addEventListener('resize', function () {
                if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
                    window.setTimeout(function () {
                        document.activeElement.scrollIntoViewIfNeeded()
                    }, 0)
                }
            });
            // 在输入框获取焦点, 键盘弹起后, 真的是一行代码
            var interval = setInterval(function () {
                document.body.scrollTop = document.body.scrollHeight
            }, 100)

            $(document).on('submit.form.data-api', '[data-toggle="ajax-form"]', function (e) {
                var formValue = $(e.target);
                $(this).ajaxSubmit({
                    url: formValue.attr("action"),
                    success: function (data) {

                    },
                    error: function (xhr, type, s) {
                        //notification("",false);	//结束
                    }
                });
                return false;
            });
        });
    </script>
    <!-- kindeditor -->
</head>
<body class="ukefu-im-theme"
      style="overflow:hidden;height:calc(100% - 50px);overflow-y: atuo;/* 或者scroll */-webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */"
      class="ukefu-point-text">
<div id="header" class="theme${inviteData.consult_dialog_color!''}">
    <div  class="bq-back-btn">
        <img src="/images/back.png" onclick="history.go(-1)" width="25" height="25">
        <img
                src="<#if inviteData?? && inviteData.consult_dialog_logo??>/res/image.html?id=${inviteData.consult_dialog_logo?url}<#else>/images/logo.png</#if>"
                style="height:50px;padding:10px;">
    </div>
    <div class="ukefu-func-tab">
        <ul>
            <#if models?? && models["xiaoe"]?? && models["xiaoe"] == true && inviteData.ai?? && inviteData.ai == true && aiid??>
                <li>
                    <a href="/im/index.html?appid=${appid!''}&orgi=${orgi!''}<#if aiid??>&aiid=${aiid}</#if>&ai=true<#if client??>&client=${client!''}</#if><#if type??>&type=text</#if><#if skill??>&skill=${skill!''}</#if><#if agent??>&agent=${agent!''}</#if>&userid=${userid!''}&sessionid=${sessionid!''}<#if contacts?? && contacts.name??>&name=${contacts.name}</#if><#if contacts?? && contacts.phone??>&phone=${contacts.phone}</#if><#if contacts?? && contacts.email??>&email=${contacts.email}</#if><#if contacts?? && contacts.memo??>&memo=${contacts.memo}</#if>&t=${.now?long}">智能客服</a>
                </li>
                <li class="cur"><a href="javascript:void(0)">人工坐席</a></li>
            <#else>
                <li class="cur"><a href="javascript:void(0)">人工坐席</a></li>
            </#if>
        </ul>
    </div>
</div>
<div id="cooperation" class="ukefu-cooperation"
     style="display:none;z-index: 100;background-color: #ffffff;position: fixed;left: 0px;width: 100%;top: 0px;top:0px;height: 100%;">
    <div class='ukefu-image-canvas' id='ukefu-image-content' style="margin-top:2px;">
        <img id="ukefu_img_ctx" style="max-width: 100%;max-height: 100%;">
    </div>
    <div class='drawBoard' style="position: absolute;left: 0;top: 0;margin-top:2px;z-index: 998;">
        <canvas id="canvas-borad" class="brushBorad">你的浏览器不支持 canvas 绘图</canvas>
    </div>
    <div style="position: absolute;bottom: 10px;width: 100%;text-align: center;z-index:10000">
        <button id="offcoop-btn"
                style="border-color:#009688 !important;color:#FFFFFF;display: inline-block;height: 38px;line-height: 38px;padding: 0 18px;background-color: #009688;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;margin-right:10px;border: none;border-radius: 2px;cursor: pointer;opacity: .9;filter: alpha(opacity=90);background-color: #377FED !important;border:1px solid #FFFFFF;"
                onclick="offCoop();">退出协作
        </button>
    </div>
</div>
<div class="chat-above" id="above" style="height:calc(100% - 110px);">
    <div class="clearfix message  welcome" style="margin:5px;">
        <span id="welcome-message">${(inviteData.dialog_message!'欢迎您来咨询！所有客户均可以免费注册试用，有关技术支持和商业咨询可以申请加入我们官方QQ群：555834343.')?no_esc}</span>
    </div>
    <#if chatMessageList?? && chatMessageList.content??>
        <#list chatMessageList.content?reverse as chatMessage>
            <#if chatMessage.userid?? && userid?? && chatMessage.calltype?? && chatMessage.calltype = "in">
                <div class="clearfix chat-block">
                    <div class="chat-right">
                        <img class="user-img"
                             src="<#if headPic?? && headPic!=''>${headPic}<#else>/im/img/user.png</#if>"
                             onerror="this.src='/im/img/user.png'" alt="">
                        <div class="chat-message">
                            <label class="time">${chatMessage.createtime!''}</label> <label
                                    class="user">${chatMessage.username!''}</label>
                        </div>
                        <div class="chatting-right">
                            <i class="arrow arrow${inviteData.consult_dialog_color!''}"></i>
                            <div
                                    class="chat-content theme${inviteData.consult_dialog_color!''}"><#include
                                "/apps/im/media/message.html"></div>
                        </div>
                    </div>
                </div>
            <#else>
                <div class="clearfix chat-block">
                    <div class="chat-left">
                        <img class="user-img"
                             src="<#if inviteData?? && inviteData.consult_dialog_headimg??>/res/image.html?id=${inviteData.consult_dialog_headimg?url}<#else>/images/agent.png</#if>"
                             alt="">
                        <div class="chat-message">
                            <label class="user">${chatMessage.username!''}</label> <label
                                    class="time">${chatMessage.createtime!''}</label>
                        </div>
                        <div class="chatting-left">
                            <i class="arrow"></i>
                            <div class="chat-content"><#include    "/apps/im/media/message.html"></div>
                        </div>
                    </div>
                </div>
            </#if> </#list> </#if>
    <div><#if agentFirstMessage?? && agentFirstMessage.type == "product"><#include    "/apps/im/connectMsg/product.html"></#if></div>
</div>
<div class="ukefu-suggest" id="ukefu-suggest"></div>
<div class="mobile-chat-bottom" id="bottom">
    <form id="imgForm"
          action="/im/image/upload.html?userid=${userid!''}&appid=${appid!''}&username=${username!''}&orgi=${orgi!''}"
          data-toggle="ajax-form"
    " enctype="multipart/form-data">
    <a href="javascript:;" class="imgFile" onclick="closeFaceDialog(0)">
        <img src="/im/img/img.png" class="chat-type" style="width:32px;height:32px;">
        <input type="file" name="imgFile" id="imgFile" accept="image/*"
               onChange="$('#imgForm').submit();$(this).val('');">
    </a>
    </form>
    <textarea id="message" name="content"
              maxlength="<#if inviteData.maxwordsnum gt 0>${inviteData.maxwordsnum}<#else>300</#if>"></textarea>
    <div class="btn-push clearfix" class="tools">
        <img id="facedialog" onclick="return openFaceDialog()" src="/im/img/face.png"
             style="width:32px;height:32px;"></a>
        <a href="javascript:void(0)" onClick="sendMessage();return false;"><img src="/im/img/send.png"
                                                                                style="width:32px;height:32px;"></a>
    </div>

    <div id="faceindex" style="display:none;height:200px;position: absolute;bottom: 0px;width:100%;overflow-x:auto;">
        <table class="ke-table" cellpadding="0" cellspacing="0" border="0" style="min-width:100%;">
            <tbody>
            <#list 0..4 as row>
                <tr>
                    <#list 0..20 as col>
                        <td class="ke-cell"><span class="ke-img"><img
                                        src="/im/js/kindeditor/plugins/emoticons/images/${row*20 + col}.png"
                                        border="0" alt="" onClick="insertImg('${row*20 + col}')"></span></td>
                    </#list>
                </tr>
            </#list>
            </tbody>
        </table>
    </div>
</div>
</div>
<#if sessionConfig?? && sessionConfig.satisfaction?? && sessionConfig.satisfaction>
    <!--调查问卷弹框-->
    <div class="diaShade" id="diaShade" style="display: none"></div>
    <div class="dialogWrap" id="dialogWrap" style="display: none;width:auto;height:auto;margin-left:0px;left:0px;">
        <div class="dialogCon">
            <form id="commentContent" onSubmit="return submitForm(this)">
                <input type="hidden" name="id" id="agentserviceid" name="agentserviceid">
                <h2 class="diaHeader clearfix">
                    <span>评价</span>
                    <hr>
                </h2>
                <p class="title">您是否对此次服务满意?</p>
                <!--评价-->
                <p style="margin-top:20px;">
                    <span style="float:left;">评价：</span>
                    <span style="position: relative;top: 0px;left: 13px;">
                <#assign defaultvalue = "">
                        <#if commentList??>
                            <#list commentList as comment>
                                <div style="margin-left:55px;margin-bottom:20px;">
		            <input type="radio" name="satislevel" value="${comment.code!''}"
                           <#if comment_index == 0>checked="checked"</#if> id="dic_${comment.id!''}"
                           onclick="document.getElementById('satislevel_input').value = this.value">
		            <label for="dic_${comment.id!''}" class="radio">${comment.name!''}</label>
		        </div>
                                <#if defaultvalue == "">
                                    <#assign defaultvalue = comment.code>
                                </#if>
                            </#list>
                        </#if>
                <input type="hidden" id="satislevel_input" name="t" value="${defaultvalue}">
                </span>
                </p>
                <!--按钮-->
                <p class="submitBtnWrap" style="text-align:center;">
                    <input type="submit" class="btn submitBtn" id="submitBtn" value="提 交">
                </p>
            </form>
        </div>
    </div>
</#if>
<script>
    var service_end = false;
    // 调查问卷
    var diaShade = document.getElementById('diaShade');
    var dialogWrap = document.getElementById('dialogWrap');

    function popup(para) {
        diaShade.style.display = para;
        dialogWrap.style.display = para;
    }

    document.getElementById('above').scrollTop = document
        .getElementById('above').scrollHeight; //滚动到 对话内容的 底部
    // 参数连接
    var hostname = location.hostname;
    var socket = io.connect('${schema!'http'}://' + hostname + ':${port}/im/user');
    socket.on('connect', function () {
        socket.emit('new', {
            <#if contacts?? && contacts.name??>
            name: "${contacts.name!''}",
            phone: "${contacts.phone!''}",
            email: "${contacts.email}",
            memo: "${contacts.memo!''}",
            </#if>
            orgi: "${inviteData.orgi!''}",
            appid: "${appid!''}",
            aiid: "${aiid!''}",
            userid: "${userid!''}",
            user: "${userid!''}",
            session: "${sessionid!''}",
            osname: "${(osname!'')?url}",
            browser: "${(browser!'')?url}"
            <#if skill??>, skill: "${skill}"</#if>
            <#if username??>, nickname: "${username}"</#if>
            <#if agent??>, agent: "${agent}"</#if>
            <#if title??>, title: "${title?url}"</#if>
            <#if traceid??>, url: "${url?url}"</#if>
            <#if traceid??>, traceid: "${traceid}"</#if>
        });
    })
    socket.on("agentstatus", function (data) {
        document.getElementById('connect-message').innerHTML = data.message;
    })
    socket.on("status", function (data) {
        if (data.message != "") {
            output('<span id="connect-message">' + data.message + '</span>', 'message connect-message');
        }
        if (data.messageType == "end") {
            service_end = true;
            //editor.readonly();
        }
        <#if sessionConfig?? && sessionConfig.satisfaction?? && sessionConfig.satisfaction>
        if (data.messageType == "invit" || data.messageType == "end") {
            <#if sessionConfig?? && sessionConfig.satisfaction?? && sessionConfig.satisfaction>
            if (invite == false) {
                document.getElementById("diaShade").style.display = "block";
                document.getElementById("dialogWrap").style.display = "block";
                invite = true;
            }
            </#if>
        }
        </#if>
        if (document.getElementById("agentserviceid")) {
            document.getElementById("agentserviceid").value = data.agentserviceid;
        }
    })
    var insuggest = false;
    $('#message').on("input propertychange", function () {
        var value = $(this).val();
        if (value.trim() != '' && insuggest == false) {
            insuggest = true;
            $.ajax({
                url: "/im/suggest/mobile/${appid!''}.html?userid=${userid!''}&q=" + encodeURIComponent(value),
                success: function (data) {
                    if (data.trim() != '') {
                        $("#ukefu-suggest").empty().html(data).show();
                    } else {
                        $("#ukefu-suggest").empty().hide();
                    }
                    insuggest = false;
                }
            });
        }
    });
    socket.on('message', function (data) {
        var chat = document.getElementsByClassName('chatting-left').innerText;
        chat = data.message;
        if (data.messageType == "image") {
            chat = "<a href='" + data.message + "_original' target='_blank'><img src='" + data.message + "' class='ukefu-media-image'/></a>";
        } else if (data.messageType == "voice") {
            chat = template($('#message_tpl').html(), {data: data});
        } else if (data.messageType == "cooperation") {
            chat = "<a href='javascript:void(0)' onclick='acceptInvite(\"" + data.message + "\", \"" + data.attachmentid + "\")'>您收到一个协作邀请，点击进入协作</a>";
        } else if (data.messageType == "action") {
            //检查访客是否在协作页面上，如果在协作页面上，就开始执行重绘，否则不做处理
            drawCanvasImage(data.attachmentid);
        }
        if (data.calltype == "in") {
            output('<div class="chat-right"> <img class="user-img" src="/im/img/user.png" alt=""><div class="chat-message"><label class="time">' + data.createtime + '</label><label  class="user">' + data.nickName + '</label> </div><div class="chatting-right"><i class="arrow arrow${inviteData.consult_dialog_color!''}"></i><div class="chat-content theme${inviteData.consult_dialog_color!''}">' + chat + '</div></div>', "chat-block");
        } else if (data.calltype == "out") {
            if(!data.createtime){
                data.createtime = data.channelMessage.createtime;
            }
            output('<div class="chat-left"> <img class="user-img" src="<#if inviteData?? && inviteData.consult_dialog_headimg??>/res/image.html?id=${inviteData.consult_dialog_headimg?url}<#else>/images/agent.png</#if>" alt=""><div class="chat-message"><label  class="user">' + data.nickName + '</label><label class="time">' + data.createtime + '</label> </div><div class="chatting-left"><i class="arrow"></i><div class="chat-content">' + chat + '</div></div>', "chat-block");

            // 标记消息为已读
            $.ajax({
                type: "get",
                url: `/appapi/chatmessage/updateMessageReadStatus`,
                data: {userId: "${userid!''}", appid: "${appid!''}"},
                dataType: "json",
                success: function (data) {
                }
            });
        }
    });

    socket.on('disconnect', function () {
        output('<span id="connect-message">连接坐席失败，在线咨询服务不可用</span>', 'message connect-message');
    });

    function sendDisconnect() {
        socket.disconnect();
    }

    function acceptInvite(msgid, fileid) {
        document.getElementById("cooperation").style.display = "block";
        document.getElementById("ukefu_img_ctx").src = "/res/image.html?id=upload/" + fileid;

        $("#ukefu_img_ctx").load(function () {
            var height = document.getElementById("ukefu-image-content").offsetHeight;
            var width = document.getElementById("ukefu-image-content").offsetWidth;
            var canvas = document.getElementById("canvas-borad");
            if (canvas.getContext) {
                canvas.width = width;
                canvas.height = height;

                drawCanvasImage(fileid);
            }

        });
    }

    function drawCanvasImage(fileid) {
        var canvas = document.getElementById("canvas-borad");

        if (canvas.getContext && document.getElementById("cooperation").style.display == "block") {
            var ctx = canvas.getContext("2d");

            //创建新的图片对象
            var img = new Image();
            //指定图片的URL
            img.src = "/res/image.html?id=upload/" + fileid + "_cooperation";
            //浏览器加载图片完毕后再绘制图片
            img.onload = function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                //以Canvas画布上的坐标(10,10)为起始点，绘制图像
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            };
        }
    }

    function offCoop() {
        document.getElementById("cooperation").style.display = "none";
    }

    function sendMessage() {
        insuggest = false;
        $("#ukefu-suggest").empty().hide();
        var count = document.getElementById('message').value.length;
        if (count > 0 && service_end == false) {
            var message = $("#message").val();
            sendMessageText(message);
            $("#message").val("");
            wordinx = 0;
        } else if (service_end == true) {
            alert("服务器已断开和您的对话");
        }
        closeFaceDialog(0);
    }

    function sendMessageText(message) {
        if (message != "") {
            socket.emit('message', {
                appid: "${appid!''}",
                userid: "${userid!''}",
                username: "${username!''}",
                channel: "webim",
                type: "message",
                contextid: "${sessionid!''}",
                orgi: "${orgi!''}",
                headimgurl: "${headPic!''}",
                message: message
            });
        }
    }

    function output(message, clazz) {
        if (clazz == "message connect-message") {
            var messages = document.getElementsByClassName("connect-message");
            for (inx = 0; inx < messages.length;) {
                document.getElementById('above').removeChild(messages[inx]);
                inx++;
            }
        }
        var element = ("<div class='clearfix " + clazz + "'>" + " " + message + "</div>");
        $('#above').append(element);
        document.getElementById('above').scrollTop = document.getElementById('above').scrollHeight;
        //$("#welcome-message").html(document.getElementById('above').scrollHeight);
    }

    function update(id, message) {
        document.getElementById(id).innerHTML = message;
    }

    autoTextarea(document.getElementById("message"));// 调用
    $('#message').click(function () {
        wordinx = getPositionForTextArea(document.getElementById('message'));
        closeFaceDialog();
    });

    function submitForm(form) {
        $.post("/im/satis.html?orgi=${orgi!''}&" + "id=" + form.id.value + "&satislevel=" + document.getElementById("satislevel_input").value, function (data) {
            document.getElementById("diaShade").style.display = "none";
            document.getElementById("dialogWrap").style.display = "none";
            alert("服务评价已提交，请关闭浏览器！");
        });
        return false;
    }


    var message = {
        // text:data.message,
        // picture:function(){

        // }
        // file:function(){

        // }
        // lang:function(){

        // }
        // goods:function(){

        // }
        // POI:function(){

        // }

    }
    <#if inviteData?? && inviteData.enablevoice?? && inviteData.enablevoice == true>
    UCKeFuVoice.init("mobile");
    </#if>
</script>
<script id="message_tpl" type="text/html">
    <p class="weixinAudio" id="voice_media_<%:=data.id%>"
       style="<% if(data.duration > 30) {%>width:300px;<% }else{ %>width:<%:=50+data.duration* 10%>px;<%}%>">
        <audio src="<%:=data.message%>" id="media" width="1" height="1" preload></audio>
        <span id="audio_area" class="db audio_area">
			<span class="audio_wrp db">
				<span class="audio_play_area">
					<i class="icon_audio_default"></i>
					<i class="icon_audio_playing"></i>
				</span>
				<span class="audio_length tips_global"><%:=data.duration %>秒</span>
				<span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
			</span>
		</span>
    </p>
    <script type='text/javascript'>
        $('#voice_media_<%:=data.id%>').weixinAudio({
            autoplay: false
        });
        <\/script>
</script>
</body>
</html>